<template>
  <div id="editorform" class="ace-editor" :style="style"></div>
</template>

<script lang="ts">
  import { ref, watch, onMounted, onUnmounted } from "vue"
  import "/@/assets/ace/ace"
  import "/@/assets/ace/theme-textmate"
  import "/@/assets/ace/mode-velocity"
  import "/@/assets/ace/mode-java"
  import "/@/assets/ace/mode-html"
  import "/@/assets/ace/mode-javascript"
  import "/@/assets/ace/mode-json"
  import "/@/assets/ace/mode-yaml"
  import "/@/assets/ace/mode-lua"
  import "/@/assets/ace/mode-nginx"
  import "/@/assets/ace/mode-sql"
  import "/@/assets/ace/mode-xml"

  interface UpdateEditor {
    readOnly: Boolean
    value?: String
    mode: String
    tabSize: Number
  }
  const modePre = "ace/mode/"

  export default {
    name: "MyAceEditor",
    props: {
      content: { type: String, required: false },
      tabSize: { type: Number, required: false, default: 4 },
      mode: { type: String, required: false, default: "velocity" },
      style: { type: String, required: false, default: "" },
      readOnly: { type: Boolean, required: false, default: false },
    },
    emits: ["update:content"],
    setup(props, { emit }) {
      const isInit = ref(false)
      let editor = null // ace加载实例

      const updateEditor = ({ readOnly, mode, value, tabSize }: UpdateEditor) => {
        editor = ace.edit("editorform")
        if (editor) {
          editor.destroy()
          editor = null
        }
        editor = ace.edit("editorform")
        if (!editor) {
          return
        }
        // 使用dracula主题
        editor.setTheme("ace/theme/textmate")
        editor.setOptions({
          // 只读
          readOnly: readOnly,
          // 启用滚动
          autoScrollEditorIntoView: true,
          // 启用换行
          wrap: false,
          mode: modePre + mode,
          tabSize: tabSize,
          fontSize: "16px",
          // 启用自动滚动到底部  0, 0.5, and 1
          scrollPastEnd: 0,
          // 显示参考线
          showPrintMargin: false,
          useWorker: false,
          // // 代码提示和自动补全
          // enableSnippets: true,
          // enableLiveAutocompletion: true,
          // enableBasicAutocompletion: true,
        })

        editor.getSession().on("change", function (e) {
          // 获取编辑器最新内容
          emit("update:content", editor.getValue())
          // editor.gotoLine(editor.selection.getCursor());
        })
        if (value) {
          console.log("init value")
          editor.setValue(value)
          editor.gotoLine(0)
        }
      }
      onMounted(() => {
        updateEditor({
          readOnly: props.readOnly,
          mode: props.mode,
        })
      })

      onUnmounted(() => {
        if (editor) {
          //实例销毁
          console.log("destroy")
          editor.destroy()
        }
      })
      watch(
        () => props.content,
        (val) => {
          console.log("watch content update")
          if (val && editor && val !== editor.getValue()) {
            console.log("setValue")
            editor.setValue(val)
            // 光标跳转到几行几列  清楚设置内容后自动选中的效果
            // editor.gotoLine(editor.session.getLength());
            if (!isInit.value) {
              isInit.value = true
              editor.gotoLine(0)
            }
          }
        },
        { deep: true, immediate: true }
      )

      const reset = () => {
        editor.setValue("")
        isInit.value = false
      }

      const insert = (context) => {
        // 在光标处插入
        editor.insert(context)
      }
      return {
        insert,
        reset,
        updateEditor,
      }
    },
  }
</script>

<style lang="less" scoped>
  .ace_editor {
    position: relative !important;
    border: 1px solid lightgray;
    margin: auto;
    height: 200px;
    width: 80%;
    .fullScreen {
      height: auto;
      width: auto;
      border: 0;
      margin: 0;
      position: fixed !important;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 10;
    }
  }
</style>
